<template>
  <div class="condition-body">
    <div class="type">
      <el-select v-model="props.data.operator1" class="max-width">
        <el-option v-for="item in operators" :label="item.label" :value="item.name" />
      </el-select>
    </div>
    <div class="content">
      <el-select v-model="props.data.value1" class="max-width" multiple>
        <el-option v-for="item in optionItems" :label="item.label" :value="item.value" />
      </el-select>
    </div>

  </div>
</template>

<script setup>
import {BT, EQ, GE, GT, IN, INE, LE, LT, NE} from "@/components/EasyProcess/config/conditionOperator";

import {getCurrentInstance, inject, onMounted, ref} from "vue";
import {KEY_PROCESS_CTRL} from "@/components/EasyProcess/config/keys";

const { proxy } = getCurrentInstance();

const operators = [IN, INE]

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});

const processCtrl = inject(KEY_PROCESS_CTRL)
const optionItems = ref()

onMounted(async () => {
  init()
});
function init() {
  const formFieldsMap = processCtrl.getFormFieldsMap()
  optionItems.value = formFieldsMap.get(props.data.name).optionItems

  if (!props.data.operator1) {
    props.data.operator1 = IN.name
  }
  if (!props.data.value1) {
    props.data.value1 = []
  }
}
</script>

<style scoped lang="scss">
.condition-body {
  display: flex;
  flex-direction: row;
  width: 100%;
  .type {
    flex: 1;
    margin-bottom: 10px;
  }

  .content {
    flex: 2;
  }
}
.max-width {
  width: 100%;
}
</style>